<script setup lang="ts">
import { ArrowForward, At } from '@vicons/ionicons5'
import { ref } from 'vue'
import type { FormInstance } from '@ele-similar-ui/components/form'

const modelValue1 = ref({
  username: '',
  password: ''
})
const formRef = ref<FormInstance>()
const value3 = ref('')
const value4 = ref('')
const handleInput = (value: string) => {
  console.log(value)
}

const handleChange = (value: string) => {
  console.log(value)
}
const handleFocus = (e: FocusEvent) => {
  console.log('focus', e)
}
const handleBlur = (e: FocusEvent) => {
  console.log('blur', e)
}
const validateForm = () => {
  formRef.value?.validate((valid, errors) => {
    console.log(valid, errors)
  })
}
</script>

<template>
  <p>表单</p>
  <EsForm
    ref="formRef"
    :model="modelValue1"
    :rules="{
      username: [
        {
          min: 6,
          max: 10,
          message: '用户名6-10位',
          trigger: ['change', 'blur']
        }
      ]
    }"
  >
    <EsFormItem
      prop="username"
      :rules="[
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }
      ]"
    >
      <template #label>请输入用户名</template>
      <EsInput v-model="modelValue1.username" placeholder="请输入用户名" />
    </EsFormItem>
    <EsFormItem
      prop="password"
      label="请输入密码"
      :rules="[
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }
      ]"
    >
      <EsInput
        v-model="modelValue1.password"
        placeholder="请输入用密码"
        type="password"
      />
    </EsFormItem>
    <EsButton @click="validateForm">提交</EsButton>
    <EsButton>重置</EsButton>
  </EsForm>
</template>

<style scoped lang="scss"></style>
